<template>
	<view class="tabs_wrap" @touchmove.prevent @tap.stop="" @touchmove.stop.prevent="">
		<view class="tabsList">
			<view class="tabsItem" v-for="(item,index) in list" :key="index" @click="onChange(index,item.sort)">
				{{item.name}}
				<view
					:class="['caret-wrapper',sortValue==='descending'&&current===index?'va-descending':'',sortValue==='ascending'&&current===index?'va-ascending':'']"
					v-if="item.sort">
					<i class="sort-caret ascending"></i>
					<i class="sort-caret descending"></i>
				</view>
				<block v-if="item.icon">
					<uni-icons type="settings"></uni-icons>
				</block>
			</view>
			<view class="tabs_line" v-if="isLine"
				:style="'transform:translateX('+translateX+'px) translateX(-50%);transition-duration: 0.3s'">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "wp-tabs",
		data() {
			return {
				translateX: 0, // 标签页line的动画位置
				sortValue: '',
				current: 0,
				sortList: [],
				resh: 0
			};
		},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			isLine:{
				type: Boolean,
				default () {
					return true;
				}
			}
		},
		mounted() {
			console.info(this.list)
			setTimeout(()=>{
				let query = uni.createSelectorQuery().in(this)
				uni.getSystemInfo({
					success: res => {
						query.selectAll('.tabs_wrap').boundingClientRect(rect => {
							let screenWidth = 0
							rect.map((currentValue, index, arr) => {
								screenWidth = currentValue.width // 获取屏幕宽度
							})
							this.screenWidth = screenWidth
							this.translateX = (screenWidth / this.list.length) / 2
						}).exec();
					}
				})
			},300)
			
		},
		methods: {
			onChange(current, sort) {
				if (this.list[current].disabled) {
					this.$emit("open")
					return
				}
				var translateX = (this.screenWidth / this.list.length) / 2 + (current * (this.screenWidth / this.list.length))
				var sortValue = ''
				var descOrAsc = ""
				if (sort) {
					if (this.sortValue) {
						var flag = this.resh !== current ? '' : this.sortValue
						sortValue = flag === 'ascending' ? 'descending' : 'ascending'
						descOrAsc = flag === 'ascending' ? 'desc' : 'asc'
					} else {
						sortValue = 'ascending'
						descOrAsc = 'asc'
					}
				} else {
					descOrAsc = 'desc'
				}
				this.translateX = translateX
				this.sortValue = sortValue
				this.current = current
				this.resh = current
				this.$emit("onChange",{current:current,descOrAsc:descOrAsc})
				// this.mescroll.resetUpScroll(false)
			},
		}
	}
</script>

<style lang="scss">
	.tabs_wrap {
		height: 44px;
		overflow: hidden;
		width: 100%;
		z-index: 4;
		box-shadow: 5rpx 5rpx 5rpx #f3f3f3;
	}

	.tabsList {
		box-sizing: content-box;
		height: 100%;
		padding-bottom: 15px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background-color: #fff;
		-webkit-user-select: none;
		user-select: none;
	}

	.tabsItem {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 4px;
		color: #646566;
		font-size: 14px;
		line-height: 20px;
	}

	.caret-wrapper {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		height: 34px;
		width: 24px;
		vertical-align: middle;
		cursor: pointer;
		overflow: initial;
		position: relative;
	}

	.sort-caret {
		width: 0;
		height: 0;
		border: 5px solid transparent;
		position: absolute;
		left: 7px;
	}

	.ascending {
		border-bottom-color: #c0c4cc;
		top: 5px;
	}

	.descending {
		border-top-color: #c0c4cc;
		bottom: 7px;
	}

	.va-ascending .ascending {
		border-bottom-color: #409eff !important
	}

	.va-descending .descending {
		border-top-color: #409eff !important
	}

	.tabs_line {
		position: absolute;
		bottom: 15px;
		left: 0;
		z-index: 1;
		width: 40px;
		height: 3px;
		background-color: #000000;
		border-radius: 3px;
	}

	.tabs_content {
		background-color: #f7f8fa;
	}
</style>
